<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018/6/29
 * Time: 13:18
 */
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信支付</title>
</head>
<body>

<br/>
<div id="pay-content" style="min-height: 300px; height: auto; padding: 12px;">
    <div class="input_control" align="center">
        <input type="number" class="form_input" placeholder="请输入金额"/>
    </div>
    <div align="center">

        <button id="pay-btn"
                style="width:210px; height:50px; border-radius: 15px;background-color:#FE6714; border:0px #FE6714 solid; cursor: pointer;  color:white;  font-size:16px;"
                type="button">立即支付
        </button>
    </div>
</div>
</body>
<script src="static/js/jquery.min.js"></script>
<script>
    $(function () {

        $('#pay-btn').click(function () {
            var sel_btn = $('.form_input').val();
            if (sel_btn > 0) {

                var product_id = $('.select-btn.active').children('input').val();
                if (is_weixn()) {
                    loadData('/WxJsApi?p=' + product_id);
                } else if (is_mobile()) {

                } else {
                    $(this).attr('disabled', true);
                    loadData('/wxpay.php?p=' + sel_btn, '#pay-content');
                }
            } else {
                alert('请输入金额');
            }
        });
    });
    function loadData(url, t, f) {
        var target = arguments[1] !== undefined ? arguments[1] : '#main-content';
        var func = arguments[2] !== undefined ? arguments[2] : null;
        $(target).load(url, function (response, status, xhr) {
            if (status === 'success') {
                if (func) {
                    func();
                }
            }
        });
    }
    function is_mobile() {
        return $(window).width() < 751;
    }
    function is_weixn() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) !== "micromessenger") {
            return false
        } else {
            return true
        }
    }
</script>
<style>
    .input_control {

        margin-bottom: 20px;

    }

    .input_control input {

        -web-kit-appearance: none;
        -moz-appearance: none;
        font-size: 1.4em;
        height: 2.0em;
        width: 210px;
        border-radius: 4px;
        border: 1px solid #c8cccf;
        color: #6a6f77;
    }
</style>
</html>
